<template>
  <div class="container">
        <div class="bar-title">
          <div class="title">
             <h2>机器在线情况</h2>
          </div>
            <div class="title">
              <h2>机器出货失败情况</h2>
            </div>
        </div>
<!-- 机器在线情况 -->
    <div class="container-nar">
      <div class="bar-left">
        <div class="barleft">
          <p class="zaixian">在线：  {{meachineList.onlineNumber}} 台</p>
          <el-progress type="circle" :percentage="meachineList.onlineRate" stroke-width=17 class="circle"></el-progress>
         <p class="shuju"></p>
        </div>
        <div class="barleft">
        <p>离线<=24小时： {{meachineList.offlineOneDayNumber}} 台</p>
          <el-progress type="circle" :percentage="meachineList.offlineOneDayRate"  stroke-width=17 class="circle"  color='#ff8d1a'></el-progress>
         <p class="shuju"></p>
        </div>
         <div class="barleft">
          <p>离线>=24小时： {{meachineList.offlineDaysNumber}} 台</p>
         <el-progress type="circle" :percentage="meachineList.offlineDaysRate" stroke-width=17  class="circle" color='#d43030'></el-progress>
        <p class="shuju"></p>
        </div>
       </div>
       <!-- 出货失败情况 -->
        <div class="bar-right">
                <div class="barleft">
                <p  class="zaixian">今日出货失败率： {{meachineFileList.todayFailNumber}} 台</p>
               <el-progress type="circle" :percentage="meachineFileList.todayFailRingRate" stroke-width=17  class="circle" ></el-progress>
              <p class="shuju"><span>日环比</span>   <span :class="meachineFileList.todayFailRate>'0'?'red':'green'" class='kuasndu'>{{meachineFileList.todayFailRate}}%</span></p>
              
              </div>
              <div class="barleft">
            <p  class="zaixian">周出货失败率： {{meachineFileList.thisWeekFailNumber }} 台</p>
                <el-progress type="circle" :percentage="meachineFileList.thisWeekFailRingRate " stroke-width=17  class="circle" ></el-progress>
              <p class="shuju"><span>日环比</span>   <span :class="meachineFileList.thisWeekFailRate>'0'?'red':'green'" class='kuasndu'>{{meachineFileList.thisWeekFailRate}}%</span></p>
              </div>
              <div class="barleft">
                <p  class="zaixian">月出货失败率: {{meachineFileList.thisMonthFailNumber}} 台</p>
              <el-progress type="circle" :percentage="meachineFileList.thisMonthFailRingRate" class="circle" stroke-width=17    ></el-progress>
              <p class="shuju"><span>日环比</span>   <span :class="meachineFileList.thisMonthFailRate>'0'?'red':'green'" class='kuasndu'>{{meachineFileList.thisMonthFailRate}}%</span></p>
              </div>
      </div>
  </div>
   <div class="main-echart">
       <div class="bgc">
        <div class="main-echat-top">
        <div class="main-echat-topleft">
        <el-radio v-model="radio7" label="1" border @change="getRateroadlist()">空道率</el-radio>
        <el-radio v-model="radio7" label="2" border @change="getemptyroadlist()">空货率</el-radio>
        </div>
        <div class="main-echat-topright">
        <div class="main-echat-topcenter">
          商品过期率
        </div>
        <div class=" placeholder">
        <div></div>
         <Select class="toolbar-item" clearable  @on-change="getjurisdiction()" style="margin-top:30px" placeholder="请选择
         ">
                <Option v-for="item in jurisdictionlist" :value="item.groupName" :key="item.id" style="width:100px;margin-top:20px;">{{ item.groupName }}</Option>
            </Select>
        </div>
          </div>
        </div>
        <div class="main-echart-one">
            <div id="eCharts2" :style="{width: '100%', height: '100%'}" class="mainechart"></div>
            <div id="eCharts" :style="{width: '100%', height: '100%'}" class="mainechart"></div>
        </div>
      </div>
            
     </div>
  <!-- <div style="height:500px;width:100%">
     <huan-chart/>
  </div> -->
  <div class="main-echart-exal">
    <div class="main-echart-title">
        <div class="operation-top">
          <div class="top-left">
          机器故障情况
        </div>
        <div class="top-right">
            <!-- 日期选择 -->
          <el-date-picker
            @change="TimetoChange"
          v-model="orderTime"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          >
        </el-date-picker>
            <!-- 时间选择 -->
          <div class="seleclist">
          <span @click="numtime(-7)"   :class="istindex==-7?'active':''">最近7天</span>
          <span @click="numtime(-30)"  :class="istindex==-30?'active':''">最近30天</span>
          </div>
         <Select class="toolbar-item" clearable v-model="tradeCode"  @on-change="getgroupslist()" style="width:200px;margin-top:-10px" placeholder="请选择">
                <Option v-for="item in secondgroup" :value="item.groupName" :key="item.id">{{ item.groupName }}</Option>
            </Select>
            
          <div></div>
      </div>
  </div> </div>
     <div class="main-echart-exallist">
      <div id="eCharts3" :style="{width: '100%', height: '100%'}" class="mainechart"></div>

    </div>
   </div>
  </div>
</template>
<script>
 // 引入基本模板
  import echarts from 'echarts/lib/echarts'
  import { debounce } from '@/utils'
  import axios from "../../utils/fetch.js";
  // import {getDay} from "../../utils/fetch.js";
  const animationDuration = 3000
export default {
  data() {
    return {
      chart:null,
      orderTime: [],
      istindex:0,
      meachineList:{},//机器出货情况 
      meachineFileList:{}, //机器出货失败情况
      radio7: "1",
      value: "",
      jurisdictionlist:[], //  用户管辖组数据
      getinitChart1:{},
      getinitChart:{},
      vendorNumbers:0,////机器数量
      breakagelist:[],//商品报损数据
      array:[],//
      startData:'',//开始时间
      endDateStr:"",//结束时间
      secondgroup:{},
      troubleDate :[],//故障日期 ,
      troubleName :[],//故障名称 ,
      troubleNumber :[],//售货机故障次数 , 
   
    };
  },
  mounted(){
     this.getDay(-7);//7天前日期
    this.initChart3()
    // this.__resizeHandler = debounce(() => {
    // if (this.chart) {
    //   this.chart.resize()
    // }
    // }, 100)
    window.addEventListener('resize', this.__resizeHandler)
  },
  beforeDestroy() {
    if (!this.chart) {
         return
    }
    window.removeEventListener('resize', this.__resizeHandler)
    this.chart.dispose()
    this.chart = null
    },
  created(){
      this.meachine() // / 机器出货情
      this.meachineFile()//机器出货失败情况
      this.getemptyroadlist() //空道率
      this.getjurisdiction()  //组别选择 
      this. getgroupslist()  //第二个组别选择
      this.getmalfunction() //故障数据

  },
  methods: {
    meachine(){  // 机器在线情况
      axios.online().then(res => {
        this.meachineList = res.data.data;
        });
    }, 
    meachineFile(){ //机器出货失败情况
        axios.defeated().then(res => {
        this.meachineFileList = res.data.data;
        });
    },
    
    getRateroadlist(){//控货率
      axios.Rateroad().then(res => { 
      const Rateroadlist = res.data.data;     
      this.getinitChart1=[] //清空数组
      this.vendorNumbers=0
      Rateroadlist.forEach(element => {
      this.getinitChart1.push({
      value: element.vendorNumber ,//错误
      name:element.scrapRateType+"\r\r\r\r\r"+element.scrapRate +"%"+"\r\r\r\r\r"+ element.vendorNumber
      });
      this.vendorNumbers += element.vendorNumber
      });
      this. initChart1()
      });
    }, 

    getemptyroadlist(){//空道率
      axios.emptyroad().then(res => {
      const emptyroadlist = res.data.data         
      this.getinitChart1=[] //清空数组
      this.vendorNumbers=0
      emptyroadlist.forEach(element => {
      this.getinitChart1.push({
      value: element.vendorNumber,//错误
      name:element.scrapRateType+"\r\r\r\r\r"+element.emptyRoadTypeRate +"%"+"\r\r\r\r\r"+ element.vendorNumber
      });
        this.vendorNumbers += element.vendorNumber
      });
      this. initChart1()
      });
    },
    getjurisdiction(){ //  用户管辖组数据
       axios.jurisdiction().then(res => {
      this.jurisdictionlist = res.data.data
      this.jurisdictionlist.forEach(item=>{
      this.array.push(item.id)
      }) 
      console.log(this.array)
      this.getbreakagelist(this.array)
      });
     
    },
    getgroupslist(){ //  用户管辖组数据
     axios.jurisdiction().then(res => {
      this.secondgroup = res.data.data
      this.array=[]
      this.secondgroup.forEach(item=>{
      this.array.push(item.id)
      }) 
      console.log(this.array)
      this.getmalfunction(this.array)
      });
      
    },
    getbreakagelist(values){ //商品报损数据
    console.log(values)
      axios.failure(values).then(res => {
      this.breakagelist = res.data.data;
      this.getinitChart=[]//清空数组
      this.vendorNumbers =0
      this.breakagelist.forEach(element => {
      this.getinitChart.push({
      value: element.vendorNumber,//错误
      name:element.scrapRateType+"\r\r\r\r\r"+element.scrapRate +"%"+"\r\r\r\r\r"+ element.vendorNumber
      });
        this.vendorNumbers += element.vendorNumber
      });

     
      this. initChart()
      });
    },

   TimetoChange() {//日期选择计算// 计算时间间隔 
    var date = new Date(this.orderTime[0]); //开始时间
    this.startData =date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();//  "yyyy-MM-dd ");
    var dataold = new Date(this.orderTime[1]); //结束时间
    this.endDateStr = date.getFullYear() +"-" +(dataold.getMonth() + 1) +"-" +dataold.getDate();
    var parmes={
         startData:this.startData,
         endDate:this.endDateStr
    }
    this. getmalfunction(parmes)
    },

   getDay(day){  
       var today = new Date();  
       var targetday_milliseconds=today.getTime() + 1000*60*60*24*day;          
       today.setTime(targetday_milliseconds); //注意，这行是关键代码
       var tYear = today.getFullYear();  
       var tMonth = today.getMonth();  
       var tDate = today.getDate();  
       tMonth =this. doHandleMonth(tMonth + 1);  
       tDate = this.doHandleMonth(tDate);  
       return tYear+"-"+tMonth+"-"+tDate;  
  } ,

    doHandleMonth(month){  
       var m = month;  
       if(month.toString().length == 1){  
          m = "0" + month;  
       }  
       return m;  
    },

    numtime(value){//按日期选
      const date=new Date()//今天
      this.startData =date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();//  "yyyy-MM-dd ");
      if(value==-7){ //7天前日期
      this.endDateStr=this.getDay(-7)
      var parmes={
      startData:this.startData,
      endDate:this.endDateStr
       }
      this.getmalfunction(parmes)
 
      }  else {//30天前日期
      this.endDateStr=this.getDay(-30)
      var parmes={
      startData:this.startData,
      endDate:this.endDateStr
       }
          console.log( this.endDateStr)
      this. getmalfunction(parmes)
      }
    },
      // 售货机故障数据
    getmalfunction(parmes){
      // parmes=this.startData 
        console.log(parmes)
       axios.accidental(parmes).then(res => {
       const alfunction= res.data.data;
       this.troubleDate=[]
       this.troubleName=[]
       this.troubleNumber=[]
       alfunction.forEach(element=>{
        this.troubleDate.push(element.troubleDate)
        this.troubleName.push(element.troubleName)
        this.troubleNumber.push(element.troubleNumber)
       })
       })
       this.initChart3()
    },

    initChart1() {
      const vendorNumbers=this.vendorNumbers
          const  option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },

        color: ["#ff5733", "#ffeb3b", "#12d2bb", "#13c448"],
        calculable: true,

        legend: {
          orient: "vertical",
          x: "right",
           y: "center",
         
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,

            label: {
              normal: {
                show: true,
                position: 'center',
                 formatter:function (argument) {
                            var html;
                            html= "机器数量" + "\r\n\r\n" +vendorNumbers+ "台"
                           return html;              
                        },
             textStyle: {
                  fontSize: "20",
                  fontWeight: "bold"
                }
              },
         
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data:  this.getinitChart1,
            animationDuration
          }
        ]
      }; 
        this.chart = echarts.init(document.getElementById('eCharts2')) //初始化图表
         this.chart.setOption(option)
         
    },
    initChart() {
        const vendorNumbers=this.vendorNumbers
        const  option = {
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            color: ["#d43030", "#ffc300", "#01aaef", "#69cf67"],
            calculable: true,
            legend: {
              orient: "vertical",
              x: "right",
              y: "center",      
            },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,

            label: {
            normal: {
              show: true,
              position: 'center',
                formatter:function (argument) {
                  var html;
                  html= "机器数量" + "\r\n\r\n" + vendorNumbers + "台"
                    return html;              
                },
             textStyle: {
                  fontSize: "20",
                  fontWeight: "bold"
                }
              },  
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data:  this.getinitChart,
            animationDuration
          }
        ]
      };
        this.chart = echarts.init(document.getElementById('eCharts')) //初始化图表
          this.chart.setOption(option)
            
    },
    initChart3() {
          const option = {

        tooltip: {
            trigger: 'axis'
        },
        color:['#ac33c1','#4294f7','#ff5733','#5ebe67'],
        legend: {
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.troubleDate,
            animationDuration
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name:this.troubleName,
                type:'line',
                smooth: true,
                stack: '总量1',
                data:this.troubleNumber,
                animationDuration
            },
           
        ]
      };
     //初始化图表
     this.chart = echarts.init(document.getElementById('eCharts3'))
      this.chart.setOption(option)
         
    }
}
};
</script>
<style >
@import "../../style/OperationData.css";
.red{
  color: red;
}
.green{
  color:#51c811
}
.kuasndu{
  margin-left: 20px;
}

</style>
